<template>
  <view class="category-container">
    <!-- 左侧分类菜单 -->
    <scroll-view scroll-y class="left-menu">
      <view 
        class="menu-item" 
        v-for="(item, index) in categories" 
        :key="index"
        :class="{ active: currentCategory === index }"
        @tap="changeCategory(index)"
      >
        {{ item.name }}
      </view>
    </scroll-view>
    
    <!-- 右侧子分类 -->
    <scroll-view scroll-y class="right-content">
      <view class="sub-category" v-if="categories[currentCategory]">
        <view 
          class="sub-item" 
          v-for="(item, index) in categories[currentCategory].subCategories" 
          :key="index"
          @tap="navigateToList(item)"
        >
          <image :src="item.icon" mode="aspectFit"></image>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const currentCategory = ref(0)
const categories = ref([
  {
    name: '房产',
    subCategories: [
      { name: '整租', icon: 'https://img.58cdn.com.cn/weixin/r/category/house/zz.png' },
      { name: '合租', icon: 'https://img.58cdn.com.cn/weixin/r/category/house/hz.png' },
      { name: '新房', icon: 'https://img.58cdn.com.cn/weixin/r/category/house/xf.png' },
      { name: '二手房', icon: 'https://img.58cdn.com.cn/weixin/r/category/house/esf.png' },
      { name: '写字楼', icon: 'https://img.58cdn.com.cn/weixin/r/category/house/xzl.png' },
      { name: '商铺', icon: 'https://img.58cdn.com.cn/weixin/r/category/house/sp.png' }
    ]
  },
  // {
  //   name: '招聘',
  //   subCategories: [
  //     { name: '销售', icon: 'https://img.58cdn.com.cn/weixin/r/category/job/sales.png' },
  //     { name: '技术', icon: 'https://img.58cdn.com.cn/weixin/r/category/job/tech.png' },
  //     { name: '客服', icon: 'https://img.58cdn.com.cn/weixin/r/category/job/service.png' },
  //     { name: '行政', icon: 'https://img.58cdn.com.cn/weixin/r/category/job/admin.png' },
  //     { name: '人事', icon: 'https://img.58cdn.com.cn/weixin/r/category/job/hr.png' },
  //     { name: '财务', icon: 'https://img.58cdn.com.cn/weixin/r/category/job/finance.png' }
  //   ]
  // },
  // {
  //   name: '二手',
  //   subCategories: [
  //     { name: '手机', icon: 'https://img.58cdn.com.cn/weixin/r/category/ershou/phone.png' },
  //     { name: '电脑', icon: 'https://img.58cdn.com.cn/weixin/r/category/ershou/computer.png' },
  //     { name: '家具', icon: 'https://img.58cdn.com.cn/weixin/r/category/ershou/furniture.png' },
  //     { name: '家电', icon: 'https://img.58cdn.com.cn/weixin/r/category/ershou/appliance.png' },
  //     { name: '数码', icon: 'https://img.58cdn.com.cn/weixin/r/category/ershou/digital.png' },
  //     { name: '奢侈品', icon: 'https://img.58cdn.com.cn/weixin/r/category/ershou/luxury.png' }
  //   ]
  // },
  // {
  //   name: '服务',
  //   subCategories: [
  //     { name: '搬家', icon: 'https://img.58cdn.com.cn/weixin/r/category/service/move.png' },
  //     { name: '家政', icon: 'https://img.58cdn.com.cn/weixin/r/category/service/housekeeping.png' },
  //     { name: '维修', icon: 'https://img.58cdn.com.cn/weixin/r/category/service/repair.png' },
  //     { name: '装修', icon: 'https://img.58cdn.com.cn/weixin/r/category/service/decoration.png' },
  //     { name: '教育', icon: 'https://img.58cdn.com.cn/weixin/r/category/service/education.png' },
  //     { name: '美容', icon: 'https://img.58cdn.com.cn/weixin/r/category/service/beauty.png' }
  //   ]
  // }
])

const changeCategory = (index) => {
  currentCategory.value = index
}

const navigateToList = (item) => {
  uni.navigateTo({
    url: `/pages/list/list?category=${item.name}`
  })
}
</script>

<style scoped>
.category-container {
  display: flex;
  height: 100vh;
  background: #fff;
}

.left-menu {
  width: 200rpx;
  background-color: #f8f8f8;
  height: 100%;
}

.menu-item {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.menu-item.active {
  background-color: #fff;
  color: #ff552e;
  position: relative;
  font-weight: bold;
}

.menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 40rpx;
  background: #ff552e;
}

.right-content {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
}

.sub-category {
  display: flex;
  flex-wrap: wrap;
}

.sub-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 0;
}

.sub-item image {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.sub-item text {
  font-size: 24rpx;
  color: #333;
}
</style> 